<template>
  <div class="warpper">
    <template v-for="item in typeList" :key="item.id">
      <div class="item" @click="handleType(item)">
        <div class="type_name">{{ item.typeName }}</div>

        <FileUnknownTwoTone style="font-size: 68px" />
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { QuestType } from '@/store/create/temp/types/QuestType';
import { FileUnknownTwoTone } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { FileUnknownTwoTone },
  props: {
    typeList: { type: Array, default: (): QuestType[] => [] },
  },
  emits: [
    /** 点击类型 */
    'handleType',
  ],
  setup(props, { emit }) {
    const handleType = (item: QuestType) => {
      emit('handleType', item);
    };
    return { handleType };
  },
});
</script>
<style lang="less" scoped>
.warpper {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 323px;
    height: 130px;
    padding: 12px 12px 12px 30px;
    background-color: @color-white;
    margin: 11px 0 0 11px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .type_name {
      font-size: 20px;
      font-weight: 500;
    }
    svg {
      font-size: 68px;
    }
  }
}
</style>
